<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Hvm-一个简单的双向绑定的模板引擎(by:HuiSir)</title>
	<style>
		#app {
			text-align: center;
		}
	</style>
</head>
<body>
    <div id="app">
		<p h-if="!bool">h-if显隐放到根节点情况1</p>
        <h2>{{title}}</h2>
        <input h-model="user.name"><br /><br />
		<select h-model="user.name"> 
			<option h-for="item in hforTest.arr" value="{{item}}">{{item}}</option>
		</select><br /><br />
		<p h-for="(item,index) in hforTest.arr">
			<span>{{index+'.'+item}}</span>
		</p>
		<input h-model="user.name" type="radio" name="as" id="as" value="Hvm by Huisir"/><label for="as">Hvm by Huisir</label>
		<input h-model="user.name" type="radio" name="as" id="sss" value="222"/><label for="sss">222</label>
		<input h-model="user.name" type="radio" name="as" id="www" value="333" h-if="!bool"/>
		<label for="www" h-if="!bool">333</label>
        <h1>{{user.name}}</h1>
		<p><span h-show="bool">h-show显示与隐藏{{bool}}</span><span h-show="bool">h-show显示与隐藏{{bool}}</span></p> <br>
        <button h-if="bool" @click="clickMe" class="___{{m}}">{{'#'+(!(age.aaa>0)?'按钮':'不是按钮')}}</button> <br /><br />
		<div><span h-if="bool">h-if显示与隐藏{{bool}}</span><span h-if="bool">h-if显示与隐藏{{bool}}</span></div> <br>
		<p h-if="!bool">h-if显示与隐藏{{!bool}}</p><p h-if="!bool">h-if显示与隐藏{{!bool}}</p><br>
		<button @click="showbool">显隐</button>
		<!--注释-->
		<p h-if="!bool">h-if显隐放到根节点情况2</p>
    </div>
    <!-- <script src="Hvm.min.js"></script> -->
    <script src="../模板引擎和双向绑定原理及实现.js"></script>
	<script type="text/javascript">
		 new Hvm({
			el: '#app',
			data: {
				title: 'hello world',
				user:{
					name:'Hvm by Huisir',
				},
				hforTest:{
					arr:[
						'Hvm by Huisir',
						'这是一款支持双向绑定的模板引擎',
						'它类似于VUE，它特别小',
					]
				},
				age:{aaa:0},
				m:'mmmmmmm',
				bool:true,
			},
			methods: {
				clickMe: function () {
					this.title = this.title=='你好'?'hello world':'你好',
					alert(this.user.name)
				},
				showbool:function(){
					this.bool = !this.bool
					this.age.aaa = Math.random()>0.5?1:0
				}
			},
			beforeOnload:function(){
				//console.log('beforeOnload 执行了')	
			},
			onload: function () {
				//console.log(this.age.aaa)
			}
		})
	</script>
</body>
</html>
